<!--
* @description  
* @fileName  1_自定义指令
* @author zhoujunlin
* @date 2022-03-20 21:20:46
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1_自定义指令</title>
    <script src="../js/vue.js"></script>
</head>

<!-- 
自定义指令总结：
一、定义语法：
(1).局部指令：
    new Vue({					            new Vue({
        directives:{指令名:配置对象}   或   		directives{指令名:回调函数}
    }) 				                        })

    (2).全局指令：
Vue.directive(指令名,配置对象) 或   Vue.directive(指令名,回调函数)
        
二、配置对象中常用的3个回调：
(1).bind：指令与元素成功绑定时调用。
(2).inserted：指令所在元素被插入页面时调用。
(3).update：指令所在模板结构被重新解析时调用。

三、备注：
1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，别忘了加"",不要用camelCase命名。
3.所有指令相关的this都是window
4.采用回调函数写法相当于配置对象写法的bind+update

-->

<!-- 
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。 
-->

<body>
    <div id="app">
        <h2>{{name}}</h2>
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
        <h2>放大10倍后的n值是：<span v-big-number="n"></span></h2>
        <button @click="n++">点我n+1</button>
        <hr>
        <input type="text" v-fbind:value="n" />
    </div>

    <script>
        Vue.config.productionTip = false

        // 定义全局指令-对象式
        /* Vue.directive('fbind', {
            // 指令与元素成功绑定时
            bind(element, binding) {
                element.value = binding.value
            },
            // 指令所在元素被插入页面时
            inserted(element, binding) {
                element.focus()
            },
            // 指令所在的模板被重新解析时
            update(element, binding) {
                element.value = binding.value
                element.focus()
            }
        })
        Vue.directive('big', function (element, binding) {
            //console.log(element);
            //console.log(binding); 
            //console.log(this);
            // 指令内的函数里this是window对象
            element.innerText = binding.value * 10
        }) */

        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    name: 'VUE',
                    n: 1
                }
            },
            // 局部指令
            directives: {
                // 指令名如果是多个单词 用-分割 加上"""
                'big-number': function (element, binding) {
                    element.innerText = binding.value * 10
                },
                // 函数式  相当于bind+update
                big(element, binding) {
                    element.innerText = binding.value * 10
                },
                fbind: {
                    // 指令与元素成功绑定时
                    bind(element, binding) {
                        element.value = binding.value
                    },
                    // 指令所在元素被插入页面时
                    inserted(element, binding) {
                        element.focus()
                    },
                    // 指令所在的模板被重新解析时
                    update(element, binding) {
                        element.value = binding.value
                        element.focus()
                    }
                }
            }
        });

    </script>
</body>

</html>